@import 'vars.styl'
@import 'media_queries.styl'
@import 'mixins.styl'
@import 'big-header.styl'

$head-h = 3.25em
$head-margin = 3em
$head-bg = $bg-color
$nav-margin = 1em

.logo
  svg
    height 3em

.header
  position relative
  display flex

.burger
  height 100%
  min-height $head-h
  display flex
  align-items center
  justify-content flex-end
  defaultsColors()
  background none

  button
    width 3em
    height @width

.sticky-header
  position fixed
  z-index 1000
  min-width 100%

header
  background $head-bg
  box-shadow $tip-sh
  color $color
  display flex
  flex 1 1 100%
  flex-flow row wrap
  align-items center
  min-height $head-h
  justify-content flex-start
  margin-right $head-margin
  // flex 2

  .brand
    display flex
    justify-content center
    align-items center
    margin-left $head-margin
    margin-bottom 1em

    .iso svg
      fill $color

    .logo
      color color1
      margin 0 0 0 0.5em

  .search
    position relative
    flex 1
    order 3

  .header-content
    font-family $title-font
    flex  1 100%
    justify-content flex-start
    margin 0 0 0 $head-margin
    //-margin-left $head-margin * 1.5
    //- display none

  .hc
    display inline-flex
    margin 0 0 1em 1em

  .iso
    width 36px
    height @width
    display inline-block

  .title
    display flex
    flex-flow column nowrap
    justify-content flex-end
    align-items flex-end
    .net
      font-size .8em
      vertical-align baseline
      margin-top -.8em
    h1
      font-size 1.5rem
      margin 0
      font-weight 400

  .nav.open
    .burger
        background $head-bg
  .nav
    order 3
    flex 0 1 100%
    display flex
    position absolute
    flex-flow column wrap
    right 0
    top 0
    z-index 2000
    margin 0 $nav-margin 0 0
    padding 0

    ul
      opacity 0
      list-style none
      display flex
      min-height 3em
      padding 0
      margin 0
      flex-flow column nowrap

      li
        margin 0 1em

      li, li a
        min-height 2em
        display flex
        justify-content center
        align-items center
        background $head-bg

        &.active, &.router-link-active
          border-bottom solid 2px color1

    ul
      opacity 1

    li:last-child
      a
        margin 0 0 2em 0

  .menu
    flex-centered()
    display none

    ul
      background $bg-color
      li
        display flex

      .icon
        margin 0 1em 0 0

  .menu.enabled
    display flex
    flex 1

@media $media_xsmall
  header
    .header-content
      display flex

@media $media_small
  header
    .header-content
      flex 1

      .hc
        margin 0 0 0 0.5em

@media $media_large
  header
    .header-content
      justify-content center
      margin-left $head-margin * 1.5
      margin-right $head-margin

    .burger, .burger *
      display none

    .menu
      display flex
      flex-centered()

    .nav
      position relative
      justify-content flex-end
      align-items flex-end
      flex 3
      
      .open
        border none

      ul
        opacity 1
        flex-flow row wrap
        justify-content space-between

        li
          &:first-child
            margin-left 2em

          &:last-child
            margin-right 1em

  

      ul
        li:last-child
          a
            margin 0

@media $media_large
  .header.big-menu
    big-header()

  header
    .header-content
      justify-content center
      flex 6 1 auto

    .nav
      flex 0 1 auto

      .open
        border-left $color 2px solid
        padding 0 $nav-margin 0 0
        margin 0

    .nav, .search
      margin-left auto
